<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<link rel="icon" href="<%= BASE_URL %>logo.png" />
		<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">

<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
		<title>北京耀琰科技有限责任公司 官网</title>
	</head>
	<body>
		<noscript>
			<strong>
				We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly
				without JavaScript enabled. Please enable it to continue.
			</strong>
		</noscript>
		<div style="margin-top: 50px; height: 100vh">
			<div id="carouselExample" class="carousel slide" style="height: 100%;">
				<div class="carousel-inner" style="height: 100%;">
				  <div class="carousel-item active" style="height: 100%;">
					<img src="..." class="d-block w-100" alt="...">
				  </div>
				  <div class="carousel-item">
					<img src="..." class="d-block w-100" alt="...">
				  </div>
				  <div class="carousel-item">
					<img src="..." class="d-block w-100" alt="...">
				  </div>
				</div>
				<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
				  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
				  <span class="visually-hidden">Previous</span>
				</button>
				<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
				  <span class="carousel-control-next-icon" aria-hidden="true"></span>
				  <span class="visually-hidden">Next</span>
				</button>
			  </div>
			<div th:with="posts = ${postFinder.listAll()}">
				<div id="carouselExample" class="carousel slide">
					<div class="carousel-inner">
					  <div class="carousel-item active" th:with="items = ${posts.splice(0,2)}">
						<!-- <img src="..." class="d-block w-100" alt="..."> -->
						<div class="d-block w-100" >
							<div th:each="post : ${items}">
								<div th:href="@{${post.status.permalink}}" th:text="${post.spec.title}"></div>
								<div th:text="${post.metadata.name}"></div>
								<div th:with="content = ${postFinder.content(post.metadata.name)}">
									<div th:utext="${content.content}"></div>
								</div>
							</div>
						</div>
					  </div>
					  <div class="carousel-item">
						<img src="..." class="d-block w-100" alt="...">
					  </div>
					  <div class="carousel-item">
						<img src="..." class="d-block w-100" alt="...">
					  </div>
					  <div class="carousel-item">
						<img src="..." class="d-block w-100" alt="...">
					  </div>
					</div>
					<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
					  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
					  <span class="visually-hidden">Previous</span>
					</button>
					<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
					  <span class="carousel-control-next-icon" aria-hidden="true"></span>
					  <span class="visually-hidden">Next</span>
					</button>
				  </div>
				
			</div>
		</div>
		</div>
		<div id="app">这里写vue</div>
	</body>
</html>
